<template>
    <div>
        <el-button type="primary"  @click="createMacPlan()">创建机器生产计划</el-button>
        <el-button type="success"  @click="checkSuccess()">批量审核通过</el-button>
        <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
        <el-form :inline="true" :model="keywords">
                    <el-form-item label="令号">
                    <el-input v-model="keywords.makeNo"  ></el-input>
                </el-form-item>
                <el-button type="primary" @click="searchData" icon="el-icon-search">查询</el-button>
            </el-form>
        <el-button slot="reference" type="primary">查询</el-button>
    </el-popover>

        <!-- 表格 -->
        <el-table :data="tableData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="55" :selectable='selectable'></el-table-column>
            <el-table-column prop="gidName" label="工序名称" sortable  min-width="140"></el-table-column>
            <el-table-column prop="makeNo" label="令号" sortable min-width="120"></el-table-column>
             <el-table-column prop="batch" label="批号" sortable min-width="120"></el-table-column>
            <el-table-column prop="perfromerName" label="工序执行人" sortable  min-width="180"></el-table-column>
            <el-table-column prop="startTime" label="工序完成时间" sortable min-width="120"></el-table-column>
            <el-table-column prop="state" label="状态" fixed="right" sortable  min-width="90" align="center">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.state==1">审核通过</el-tag>
                    <el-tag type="warning" v-else>审核中...</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="creatorName" label="创建人"  min-width="180"></el-table-column>
            <el-table-column fixed="right" label="操作"  align="center" width="140">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button @click="checkedPass(scope.row)" type="text" size="mini" v-if="scope.row.state===0">审核通过</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
       <el-dialog :title="dialog.title" width="450px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div>
                <el-form class="demo-form-inline" :model="dialogForm" label-position="right" label-width="120px" :rules="rules" ref="ruleForm">
                    <el-form-item label="工序名称" prop="gidName">
                        <el-input v-model="dialogForm.gidName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="令号"><el-input v-model="dialogForm.makeNo" disabled></el-input></el-form-item>
                    <el-form-item label="工序执行人"  prop="perfromer">
                        <el-select v-model="dialogForm.perfromer" placeholder="请选择工序执行人">
                            <el-option :label="item.name" :value="item.id" v-for="item in materialManagers" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="批号" prop="batch">
                        <el-input type="text" v-model.number="dialogForm.batch" class="inputSuffix" maxlength="6"></el-input>
                    </el-form-item>
                    <el-form-item label="完成日期"  prop="startTime">
                        <el-date-picker v-model="dialogForm.startTime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                    </el-form-item>
                     <el-form-item>
                         <el-button @click="createPlan('ruleForm')" type="primary">确 定</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- <div slot="footer" class="dialog-footer" style="text-align: center;">

            </div> -->
        </el-dialog>
        <el-dialog :title="dialog1.title" width="800px" center :visible.sync="dialog1.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :style="{height:'400px',overflowY: 'auto'}">
                <el-form class="demo-form-inline" ref="createMacPlanRef" :model="dialog1.dialogForm" :rules="dialog1.rules" label-position="right" label-width="140px" :inline="true">
                    <el-form-item label="机型" prop='macType'>
                        <el-select v-model="dialog1.dialogForm.macType" placeholder="请选择机型">
                            <el-option v-for="item in allMachineType" :key="item.id" :label="item.type" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产台数" prop='macNums'>
                        <el-input v-model.number="dialog1.dialogForm.macNums" placeholder="请输入生产台数" class="inputSuffix">
                            <template slot="append">台</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="生产人数" prop="persons">
                        <el-input v-model.number="dialog1.dialogForm.persons" class="inputSuffix">
                            <template slot="append">人</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="工序执行人" prop='performer'>
                        <el-select v-model="dialog1.dialogForm.performer" placeholder="请选择工序执行人">
                            <el-option v-for="item in materialManagers" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="批号" prop="batch">
                        <el-input type="text" v-model.number="dialog1.dialogForm.batch" class="inputSuffix" maxlength="6"></el-input>
                    </el-form-item>
                    <el-form-item label="完成日期" prop="startTime">
                        <el-date-picker v-model="dialog1.dialogForm.startTime" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="postTask" type="primary">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import cgbHttp from '@/axios/cgbHttp.js'
import scybHttp from '@/axios/scybHttp.js'

export default {
    data(){
         let menuId = sessionStorage.getItem('menuId');
         let validateBatch=(rule, value, callback) => {
            let reg = /^\d{6}$/
            if(!reg.test(value)){
                callback(new Error('请输入六位数字的批号'));
            }else{
                callback()
            }
         }
        return {
            menuId: menuId,
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            userId:sessionStorage.getItem("userId"),
            materialManagers:[],/*任务负责人*/
            allBom:[],
            tableData:[],
            loading:false,/**加载参数 */
            keywords:{/**搜索 */
                makeNo:''
             },

            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
            },
            dialogForm:{},
            rules:{
                gidName:[{ required: true, message: '请输入工序名称', trigger: 'blur' }],
                perfromer:[{ required: true, message: '请输入选择工序执行人', trigger: 'blur' }],
                startTime:[{ required: true, message: '请输入选择工序完成时间', trigger: 'blur' }],
                batch:[
                    { required: true, message: '请输入六位数字的批号', trigger: 'blur' },
                    {validator:validateBatch, trigger: ['change','blur' ]}
                ],
            },
            isCheckedList:[/**订单审核参数 */
                {
                    label:'通过',
                    value:'1'
                },
                {
                    label:'不通过',
                    value:'0'
                }],
            selectList:[],
            dialog1:{
                title:'',
                isShow:false,
                dialogForm:{},
                rules:{
                    macType:[{ required: true, message: '请选择机器型号', trigger: 'blur' }],
                    macNums:[{type: 'number',required: true,min:1, message: '生产台数至少输入一台', trigger: 'blur'}],
                    persons:[{type: 'number',required: true,min:1, message: '生产人数至少输入一人', trigger: 'blur'}],
                    performer:[{ required: true, message: '请选择工序执行人', trigger: 'blur' }],
                    batch:[
                        { required: true, message: '请输入六位数字的批号', trigger: 'blur' },
                        {validator:validateBatch, trigger: ['change','blur' ]}
                    ],
                    startTime:[{ required: true, message: '请输入完成日期', trigger: 'blur' }]
                }
            },
            allMachineType:[]

        }
    },
    created () {
        let self = this;
        scybHttp.managersList().then(res=>{
            self.materialManagers=res.content;
        })
        self.getTableList();
        scybHttp.bzAllJy().then(res=>{
            res.content.forEach(el=>{
                el.value=el.name
            })
            self.allMachineType=res.content
        })

    },
    methods:{
        selectable(row,index){
            if(row.state==1){
                return false;
            }else{
                return true;
            }
        },
        getTableList(){
            let self = this;
            self.loading=true;
            let data={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                makeNo:self.keywords.makeNo,

            }
            scybHttp.jqPlanList(data).then(res=>{
                self.loading=false;
                self.tableData=res.content.records;
                self.pagination.total = res.content.total;
            },error=>{
                 self.loading=false;
            })
        },
        timesFormatter(row, column, cellValue, index){
            return cellValue?this.timestampToTime1(cellValue,'yy-mm-dd'):'';
        },
        isShowDialog(type,row){
            let self = this;
                self.dialog.title ='编辑';
                self.dialog.isShow=true;
                self.dialogForm=row;
                self.dialogForm.perfromer = self.dialogForm.perfromer?Number(self.dialogForm.perfromer):'';
        },
        handleSizeChange(size){
            this.pagination.currentPage=1;
            this.pagination.pageSize=size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage=current;
            this.getTableList();
        },
        searchData(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        createPlan(formName){
           let self = this;
             self.$refs[formName].validate((valid) => {
                if (valid) {
                    self.dialogForm.startTime =self.dialogForm.startTime?self.timestampToTime1(self.dialogForm.startTime,'yy-mm-dd hh:mm:ss'):null;
                    scybHttp.updateJqPlan(self.dialogForm).then(res=>{
                        self.dialog.isShow=false;
                        self.getTableList();
                        self.$message.success(`工序修改成功`)
                    },error=>{})
                }else{
                     return false;
                }
            });
        },
        checkSuccess(){
            /**批量审核通过 */
           let self = this;
            self.$confirm('是否审核通过?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    let postData=[];
                    self.selectList.forEach(el=>{
                        postData.push(el.id)
                    })
                    if(postData.length>0){
                        scybHttp.approveJqPlanAll(postData).then(res=>{
                            self.getTableList();
                            self.$message.success('审核通过！');
                        },error=>{
                            self.$message.error('审核失败！');
                        })
                    }else{
                        self.$message.error('请至少勾选选择一个需要审核的项')
                    }

                }).catch(() => {});
        },
        changeBom(item){
            this.keywords.bom=item.value;
            this.keywords.bomId =item.id;
        },
        changeSupplier(item){
           this.keywords.supplier=item.value;
           this.keywords.supplierId = item.id;
        },
        checkedPass(row){/**单个审核通过 */
            let self = this;
            self.$confirm('是否审核通过?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    scybHttp.approveJqPlan(row.id).then(res=>{
                        self.$message.success('审核通过成功');
                        self.getTableList();
                    },error=>{})
                }).catch(() => {});

        },
        createMacPlan(){
            this.dialog1.title = '创建机器生产计划';
            this.dialog1.isShow = true;
            this.dialog1.dialogForm={
                macNums:1,
                persons:1,
                macType:'',
                startTime:null,
                performer:null
            }
        },
         postTask(){
            let self = this;
            self.$refs.createMacPlanRef.validate((valid)=>{
                if(valid){
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    self.dialog1.dialogForm.startTime = self.dialog1.dialogForm.startTime ?self.timestampToTime1( self.dialog1.dialogForm.startTime,'yy-mm-dd hh:mm:ss'):null;
                    scybHttp.createMacPlan(self.dialog1.dialogForm).then(res=>{
                        self.dialog1.isShow = false;
                        self.$message.success('创建机器生产计划成功');
                        self.getTableList();
                        loading.close();
                    },error=>{
                        loading.close();
                    })
                }
            })

        },
        handleSelectionChange(val){
            let self = this;
            self.selectList=val;
        },
    }
}
</script>
<style scoped>
.autocomplete-row{
    width:450px;
}
.input-with-select{
    width:240px;
}
.searchBtn{
    background: #409eff !important;
    color:#fff !important;
}
</style>


